<template>
  <s-layout 
    title="入驻供应链" 
    navbar="inner" 
    color='#333333' 
    :bgStyle="{
      src: applyGgImg,
      color: '#f3f5f4',
    }">
    <view class="applySCM-wrap">
      <detailNavbar title="入驻供应链" :titleStyle="{ color: '#FFFFFF', fontSize: 32 }" />
      <!-- tab 3980/19800 -->
      <view class="content">
        <view class="tabs" :class="{'tab-bg3980': state.currentTab == 1, 'tab-bg19800': state.currentTab == 2 }">
          <view :class="item.class" v-for="item in applyTabList" :key="item.id" @click="handleTab(item)"></view>
        </view>
        <view class="body">
          <view class="item" v-for="item in tabData" :key="item.id">
            <view class="img-area">
              <image :src="item.icon"/>
            </view>
            <view class="text-area">
              <view class="title">{{ item.title }}</view>
              <view class="desc">{{ item.desc }}</view>
            </view>
          </view>
        </view>
        <view class="footer" @tap="handleOpen">申请开通</view>
      </view>
    </view>

    <!-- 入驻申请 -->
    <su-popup 
      :show="state.show" 
      type="center" 
      :round="15" 
      :isMaskClick="true"
      backgroundColor="none"
			@close="handlClose">
			<view class="tips-box">
				<view class="btns">
          <view class="cancle" @tap="handlClose"><image mode="widthFix" :src="sheep.$url.cdn('/storage/default/20250526/234764169cbdcf775b54237433fdd130.png')"></image></view>
				  <view class="confirm" @tap="handlConfirm"><image mode="widthFix" :src="sheep.$url.cdn('/storage/default/20250526/c4bf6b9af1dfdff4ad37b83077b1e75b.png')"></image></view>
        </view>
			</view>
		</su-popup>
  </s-layout>
</template>
<script setup>
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';
import { computed, reactive } from 'vue';
import detailNavbar from './components/detail-navbar.vue';
import { applyTabList, applyGgImg, tabContent3980, tabContent19800 } from './tools/enum'

const state = reactive({
  currentTab: 1, // 1=3980 2=19800
  show: false
});

const handleOpen = () => {
  state.show = true
}
const handlClose = () => {
  state.show = false
}

const handlConfirm = () => {
  console.log('gogogo')
  sheep.$router.go('/pages/store/myshop')
}

const tabData = computed(() => {
  return state.currentTab == 1 ? tabContent3980 : tabContent19800
})

const handleTab = item => {
  console.log(item)
  state.currentTab = item.id
}

onLoad(() => {
  console.log('applySCM');
});

</script>
<style lang='scss' scoped>
@import './style/applySCM.scss'
</style>